iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

Angular - 從零開始系列 第 10

Angular - 從零開始 - Day10 -範本參考變數基本認識

  • 分享至 

  • xImage
  •  

angular

範本參考變數

在想命名的變數前面加上一個井字號,命給與自定義名稱,就可以完成,EX. #name,為避免與其他命名的變數相同,建議前面加一個任意英文字,我學習保哥的方式,在變數前面加上一個小寫 t,EX. #tName

假設範本變數為 #tName 要注意的地方如下:

  1. 範本內會建立一個名為 #tName 的區域變數。
  2. 該 tName 區域變數只能用於目前元件範本中。
  3. 該 tName 區域變數會儲存於該標籤的 DOM 物件。
  4. 可透過「事件繫結」將任意 DOM 物件中的任意屬性傳回元件類別中。

#tName = ref-tName,使用 # 是語法糖。

使用的地方

可以使用在任意標籤上

如下方範例,只要在標籤上加上範本參考變數就可以使用了。

<input type="text" #tKeyword />

可使用於指令

可以使用在指令標籤,如下方 header 已經被拆分成元件,但在指令標籤中加入範本參考變數 #tHeader,透過事件繫結點擊事件將範本參考變數作為其值,也可以取用到其指令中定義的方法。

<app-header #tHeader></app-header>
<div class="content" (click)="tHeader">
  <input type="text" placeholder="搜尋框" />
  <p>
    您的難以規劃,你也卻是計劃時候走向作者所在,決定工資專題各自此刻你還歡迎光臨,認為下載一名雲林二手模糊優化足夠請大家那些我的心這個問題,到達鐵路進去對象,你好過了高效屬於當地把你輸入東京不在害怕免費電影運行平台,玄幻基礎偉大學歷合作進口一番,她說清除,把。
  </p>
</div>

上一篇
Angular - 從零開始 - Day9 -實作一個側欄選單與 SPA 頁面
下一篇
Angular - 從零開始 - Day11 -元件型指令
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
memo
iT邦新手 5 級 ‧ 2020-11-27 17:16:35

還是不太了解
範本參考變數
是什麼 、要做什麼(*´・A・)?

我要留言

立即登入留言